/*
 * @Author:bealei
 * 主题色：绿色
 * 不带计数器
 * github代码配色
 */
:root {
	/* 主题色	#16bb88		22, 187, 136 */
	--r: 22;
	--g: 187;
	--b: 136;

	--demo-color: rgba(var(--r), var(--g), var(--b));
	--demo-color_01: rgba(var(--r), var(--g), var(--b), .1);
	--demo-color_02: rgba(var(--r), var(--g), var(--b), .2);
	--demo-color_03: rgba(var(--r), var(--g), var(--b), .3);
	--demo-color_06: rgba(var(--r), var(--g), var(--b), .6);
	--demo-color_08: rgba(var(--r), var(--g), var(--b), .8);

	/* 表格边框颜色 */
	--table-color: var(--demo-color);
	/* 表头背景色 */
	--th-bg-color: var(--demo-color_08);
	/* 表头文字色 */
	--th-text-color: #fff;
	/* 单行背景色 */
	--tr-bg-color: #fff;
	/* 双行背景色 */
	--tr2-bg-color: #f6f7f8;

	/* 超链接颜色 */
	--a-color: var(--demo-color);
	/* 标题颜色 */
	--title-color: #334455;
	/* 文字颜色 */
	--text-color: #667788;
	/* 加粗颜色 */
	--blod-color: #123456;

	/* 橙色 #ff8818*/
	--h: 255;
	--o: 136;
	--t: 24;
	/* 代码块颜色 */
	--code-color: rgba(var(--h), var(--o), var(--t), 1);
	/* 代码块背景 */
	--code-bg-color: rgba(var(--h), var(--o), var(--t), .1);

	/* mac风格圆点 */
	--m: #fa3534;
	--a: #ff9900;
	--c: #19be6b;
	/* 代码段边框色 */
	--codes-border: #def;
	/* 代码段背景色 */
	--codes-bg-color: #f3f6f9;

	/* 高亮颜色 */
	--highlight-color: #ff5866;
	/* 大纲颜色 */
	--dagang-color: var(--demo-color);
	--dagang-bgcolor: var(--demo-color_02);


	/* 大纲颜色 */
	--dagang-color: var(--demo-color);
	--dagang-border: var(--demo-color);
	--dagang-bgcolor: var(--demo-color_02);
	/* 侧边栏颜色 */
	--side-color: #678;
	--side-bgcolor: #f1f2f3;
	--sideinput-bgcolor: var(--side-bgcolor);



	--font-1: "Jetbrains Mono", "HarmonyOS Sans SC0", "OplusSans 3.0", "DejaVu Sans Mono", "Inconsolata", "Consolas";


	/* 内容字体 */
	--body-font: var(--font-1);
	/* 代码字体 */
	--code-font: var(--font-1);
	/* 代码块字体 */
	--codes-font: var(--font-1);

	/* 光标颜色 */
	--guangbiao: var(--demo-color);

	/* 选中高亮 */
	--select-bg: #def;
	/* 代码段文本选中高亮 */
	--select-text-bg-color: var(--demo-color_03);
}



html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	/* 关闭字体连写 */
	font-variant-ligatures: none;
	/* 光标颜色 */
	caret-color: var(--guangbiao);
}

body {
	font-family: var(--body-font);
	color: var(--text--color);
	line-height: 1.5rem;
	margin: 0;
	overflow-x: hidden;
	/* 字符间距 */
	letter-spacing: 0;
	/* 字体抗锯齿 */
	-webkit-font-smoothing: antialiased;
}

#write {
	max-width: 860px;
	margin: 0 auto;
	padding: 20px 30px 100px;
}

@media only screen and (min-width: 1400px) {
	#write {
		max-width: 1024px;
	}
}

@media only screen and (min-width: 1800px) {
	#write {
		max-width: 1200px;
	}
}

/* ------------------------ 标题 ------------------------ */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5 {
	color: var(--title-color);
	margin: 1.5rem 0;
	font-weight: bold;
	line-height: 1.4;
	cursor: text;
}

#write h1 {
	text-align: center;
	font-size: 2.2rem;
	line-height: 2.2;
	color: #fff;
	background-color: var(--demo-color);
}

#write h2 {
	font-size: 1.8rem;
	border-bottom: 3px solid var(--demo-color);
}

/* 标题字 */
#write h2 span {
	display: inline-block;
	background: var(--demo-color);
	color: #fff;
	padding: 0.1875rem 0.8rem;
	border-top-right-radius: 0.1875rem;
	border-top-left-radius: 0.1875rem;
	margin-right: 0.1875rem;

}

#write h2:after {
	display: inline-block;
	content: "";
	vertical-align: bottom;
	border-bottom: 2.785rem solid #efebe9;
	/* 阴影宽 */
	border-right: 20px solid transparent;
}

#write h3 {
	font-size: 1.6rem;
}

#write h3 {
	font-size: 1.6rem;
	border-radius: 10px;
	padding: 0.3125rem 0.625rem;
	margin: 1.3rem 0;
	padding: 0.3125rem 2rem;
	padding: 0rem 0rem;
}

#write h3 span {
	position: relative;
	/* margin-left: 50px; */
	padding-left: 1.6rem;
}

#write h3 span::before {
	position: absolute;
	content: '#';
	font-weight: 700;
	color: var(--demo-color);
	left: 0;
}


#write h4 {
	font-size: 1.4rem;
}

#write h5 {
	font-size: 1.2rem;
}

/* ------------ 图片 ------------ */
.md-image {
	/* margin: 1.2rem auto; */
}

#write img {
	margin: 1.2rem auto;
	border-radius: 4px;
	box-shadow:
		0.3px 0.3px 0.6px rgba(0, 0, 0, 0.028),
		0.7px 0.7px 1.3px rgba(0, 0, 0, 0.04),
		1.3px 1.3px 2.5px rgba(0, 0, 0, 0.05),
		2.2px 2.2px 4.5px rgba(0, 0, 0, 0.06),
		4.2px 4.2px 8.4px rgba(0, 0, 0, 0.072),
		10px 10px 20px rgba(0, 0, 0, 0.1);
}

/* ------------ 分割线 ------------ */
#write hr {
	height: 0.125rem;
	padding: 0;
	margin: 1rem 0;
	background-color: var(--demo-color);
	border: 0 none;
	overflow: hidden;
	box-sizing: content-box;
}

/* ------------ 超链接 ------------ */
#write a {
	color: var(--a-color);
	font-weight: 600;
	padding: 0 2px;
	text-decoration: none;
}

/* ------------ 引用 ------------ */
blockquote {
	padding: 8px 16px;
	border-radius: 4px;
	border-left: 8px solid var(--demo-color);
	background-color: var(--demo-color_01);
}

/* ------------ 高亮 ------------ */
#write mark {
	background-color: transparent;
	color: var(--highlight-color);
	font-weight: bold;
}

/* 选中高亮 */
::selection {
	background-color: var(--select-bg);
}

/* 代码段文本选中高亮 */
.cm-overlay.CodeMirror-selectedtext {
	background: var(--select-text-bg-color) !important;
}

/* .cm-s-typora-default .CodeMirror-selectedtext {
	background: var(--select-text-bg-color) !important;
} */
/* ------------ 段落 ------------ */
#write p {
	line-height: 1.6rem;
	word-spacing: .05rem;
	margin: 0.2rem;
}

/* ------------ 加粗 ------------ */
strong {
	color: var(--blod-color);
}

/* ------------ 多选框 ------------ */
.task-list-done {
	text-decoration: line-through var(--highlight-color);
	color: var(--demo-color);
}

.md-task-list-item>input {
	margin-left: -1.3em;
	margin-top: 0.3rem;
	-webkit-appearance: none;
	background-color: transparent;
}

.md-task-list-item>input:before {
	content: '';
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #fff;
	border-radius: 2px;
	border: 1px solid var(--demo-color);
	margin-top: -0.4rem;
	transition: all 0.2s linear;
}

.md-task-list-item>input:checked:before,
.md-task-list-item>input[checked]:before {
	content: '\2714';
	color: #fff;
	border: 1px solid var(--demo-color);
	background-color: var(--demo-color_08);
	font-family: 'Courier New', Courier, monospace;
}

/* ------------ 表格 ------------ */
#write table {
	padding: 0;
	word-break: initial;
	text-align: center;
	border: 3px solid var(--table-color);
}

/* 表头 */
#write table th {
	margin: 0;
	padding: 8px 16px;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--th-text-color);
	background-color: var(--th-bg-color);
	border: 1px solid var(--table-color);
}

/* 单行 */
#write table tr {
	margin: 0;
	padding: 0;
	background-color: var(--tr-bg-color);
	border: 1px solid var(--table-color);
}

/* 双行渐变 */
#write table tr:nth-child(2n) {
	background-color: var(--tr2-bg-color);
}

/* 单元格 */
#write table td {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--table-color);
}

/* ------------ 代码块 ------------ */
#write code {
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--code-color);
	background-color: var(--code-bg-color);
	font-family: var(--code-font);
}

/* ------- 代码段 ------- */
#write .md-fences {
	border: 2px solid var(--codes-border);
	border-radius: 8px;
	background-color: var(--codes-bg-color);
	padding: 0.5rem;
	line-height: 1.5rem;
	font-family: var(--font-1);
	/* 字符左右间距 */
	/* letter-spacing: 1px; */
}

/* 代码类型提示框 */
.code-tooltip {
	background-color: var(--codes-bg-color);
}

/* 光标颜色 */
.CodeMirror div.CodeMirror-cursor {
	border-left: 2px solid var(--guangbiao);
}

/* MAC的三个圆点 */
.md-fences::before {
	position: absolute;
	content: '';
	background: var(--m);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	left: 12px;
	top: 12px;
	z-index: 999;
	box-shadow: 20px 0px 0px var(--a), 40px 0px 0px var(--c);
}

#write .md-fences {
	/* 配合三个圆点 */
	padding-top: 30px;
}

/* 或者 */
/* .CodeMirror {
	padding-top: 20px !important;
} */

/* 暂时不知道 */
.CodeMirror-sizer {
	box-shadow: 30px 30px 30px rgba(0, 0, 0, 1);
}

/* ------------------------ 大纲 ------------------------ */
/* 侧边栏背景色 */
#typora-sidebar {
	background-color: var(--side-bgcolor);
}

/* 侧边栏背景颜色 */
/* .outline-content {
	background: #345;
} */

/* 侧边栏文字颜色 */
.sidebar-content-content {
	color: var(--side-color);
}

/* 大纲标题 */
.info-panel-tab-title {
	color: var(--demo-color);
}

/* 大纲标题下划线 */
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
	background-color: var(--demo-color);
}

/* 搜索框 */
#typora-sidebar input {
	background-color: var(--sideinput-bgcolor);
	color: var(--side-color);
}

/* 搜索框边框色 */
#file-library-search-input:focus {
	border-color: var(--demo-color);
}

/* 搜索框占位符颜色 */
#typora-sidebar input::-webkit-input-placeholder {
	color: var(--highlight-color);
}

/* 侧边栏左边框 */
.outline-item {
	/* border-left: 4px solid transparent; */
	padding-top: 5px;
	padding-bottom: 5px;
}

/* 侧边栏选中 */
.outline-item-active {
	color: var(--highlight-color);
	/* background-color: var(--dagang-bgcolor); */
	/* border-left: 4px solid var(--dagang-border); */
}

/* 选中不加粗 */
.pin-outline .outline-active {
	font-weight: 700;
}

/* 侧边栏悬停 */
.outline-item:hover {
	font-weight: 700;
	color: var(--demo-color);
	/* background-color: var(--demo-color); */
	box-sizing: border-box;
	/* 默认左右28px,现在边框4px,去除抖动 */
	/* border-left: 32px solid transparent; */
}

/* 没有下划线 */
.outline-label:hover {
	text-decoration: none;
}

/* 每个li的左边距 */
.outline-h1>.outline-item {
	padding-left: 1em
}

.outline-h2>.outline-item {
	padding-left: 2em
}

.outline-h3>.outline-item {
	padding-left: 3em
}

.outline-h4>.outline-item {
	padding-left: 4em
}

.outline-h5>.outline-item {
	padding-left: 5em
}

.outline-h6>.outline-item {
	padding-left: 6em
}

/* ------------------------ 侧边栏滚动条start ------------------------ */
/* 内层滚动槽 */
/* sidebar-menu */
::-webkit-scrollbar-track-piece {
	background-color: var(--demo-color_01);
}

/* 滚动的滑块 */
/* #sidebar-menu */
::-webkit-scrollbar-thumb {
	background-color: var(--demo-color);
}

/* 滚动的滑块停留 */
/* sidebar-menu */
::-webkit-scrollbar-thumb:active {
	background-color: var(--demo-color_06);
}

/* ------------------------ 侧边栏滚动条 end------------------------ */

/* ------------------------ 设置 ------------------------ */

.window-header,
.panel-header {
	color: var(--demo-color);
}

.window-content .nav-group-item.active,
.dropdown-menu li:hover {
	background: var(--demo-color_02);
	color: var(--demo-color_08);
}
/* 文件选中 */
.file-list-item.active{
	background-color: var(--demo-color_02);
}
/* ------------------------ 设置 ------------------------ */